<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="18" >
                <div style="margin-left:20px;font-weight: bolder;color:#666">编辑案例</div>
            </el-col>


        </el-row>
        <div style="margin-left:100px;margin-bottom:50px;margin-top:50px">
            <el-steps :active="active" finish-status="success">
                <el-step title="案例概况"></el-step>
                <el-step title="案例详情"></el-step>
                <el-step title="提交"></el-step>
            </el-steps>
            <!--<el-button style="margin-top: 12px;" @click="prev" v-if="stepFlag">上一步</el-button>-->

        </div>
        <div v-show="active==0" style="margin-left:50px">
            <el-form  ref="form" :model="form" label-position="labelPosition" label-width="100px">
                <el-form-item label="案例名称" >
                    <el-input style="width:300px" v-model="form.project_name" placeholder="请输入"></el-input>
                    <span style="color:red">*</span>
                </el-form-item>
                <el-form-item label="案例地区" prop="region" style="position:relative;z-index:200">
                    <el-select v-model="form.province" size="small" style="width:120px" @change="change()">
                        <el-option :label="item.district" :value="item.district_id" v-for="item in provinceList" >
                        </el-option>
                    </el-select>
                    <el-select v-model="form.city" size="small" style="width:120px" @change="changeThree()" v-if="city.length">
                        <el-option :label="item.district" :value="item.district_id" v-for="item in city"></el-option>
                    </el-select>
                    <el-select v-model="form.case_place" size="small" style="width:120px" v-if="city.length&&country.length">
                        <el-option :label="item.district" :value="item.district_id" v-for="item in country"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="涉及领域" >
                    <el-input style="width:300px" v-model="form.involed" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="案例照片" >
                    <el-upload
                            :action=fileUploadAction
                            :on-success="success"
                            list-type="picture-card"
                            :file-list="filelist2"
                            :before-upload="beforeAvatarUpload"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible" size="tiny">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

            </el-form>

            <el-form  label-position="labelPosition" label-width="100px">
                <el-form-item label="案例介绍" >
                    <div style="max-width:80%;margin-top:50px">
                        <script id="editor" type="text/plain"></script>
                    </div>
                </el-form-item>
            </el-form>
            <div style="margin-left:100px;margin-bottom:50px">
                <el-button style="margin-top: 12px;" @click="next" type="primary">下一步</el-button>
            </div>

        </div>
        <!--第二部分-->
        <div style="margin-left:50px" v-show="active==1">
            <el-form  ref="form" :model="form" label-position="labelPosition" label-width="100px">
                <el-row >
                    <el-col :span="8">
                        <el-form-item prop="project_scale" label="项目规模">
                            <el-input v-model="form.project_scale"  placeholder="请输入" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="amount_invesed" label="工程投资总额">
                            <el-input v-model="form.amount_invesed"  placeholder="请输入（万元）" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row >
                    <el-col :span="8">
                        <el-form-item prop="project_space" label="占地面积">
                            <el-input v-model="form.project_space"  placeholder="请输入（㎡）必须为整数" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="build_content" label="建设内容">
                            <el-input v-model="form.build_content"  placeholder="请输入" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row >
                    <el-col :span="8">
                        <el-form-item prop="technical_route" label="技术路线">
                            <el-input v-model="form.technical_route"  placeholder="请输入" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="business_model" label="商业模式">
                            <el-input v-model="form.business_model"  placeholder="请输入" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-form-item label="开始时间" >
                    <div class="block">
                        <el-date-picker
                                v-model="form.start_time"
                                type="datetime"
                                placeholder="选择日期时间" @input="start">
                        </el-date-picker>
                    </div>
                    <!--<div class="block">-->
                    <!--<el-date-picker-->
                    <!--v-model="form.start_time"-->
                    <!--type="date"-->
                    <!--placeholder="选择日期"-->
                    <!--:picker-options="pickerOptions0" @input="start">-->
                    <!--</el-date-picker>-->
                    <!--</div>-->
                </el-form-item>
                <el-form-item label="截止时间" >
                    <div class="block">
                        <el-date-picker
                                v-model="form.end_time"
                                type="datetime"
                                placeholder="选择日期时间" @input="end">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item prop="runtime" label="正常运行时间">
                    <el-input v-model="form.runtime"  placeholder="请输入" style="width:300px"></el-input>
                </el-form-item>
                <h3 style="color:#777">关联企业</h3>
                <el-form-item label="设计单位" prop="designer" >
                    <el-select v-model="form.designer" filterable>
                        <el-option :label="item.enterprise_name" :value="item.enterprise_id" v-for="item in design"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="承建单位" prop="construction" >
                    <el-select v-model="form.construction" filterable>
                        <el-option :label="item.enterprise_name" :value="item.enterprise_id" v-for="item in build"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备提供商" prop="equipment_supplier" >
                    <el-select v-model="form.equipment_supplier" filterable>
                        <el-option :label="item.enterprise_name" :value="item.enterprise_id" v-for="item in device"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运维单位" prop="operation" >
                    <el-select v-model="form.operation" filterable>
                        <el-option :label="item.enterprise_name" :value="item.enterprise_id" v-for="item in ops"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资金单位" prop="fund" >
                    <el-select v-model="form.fund" filterable>
                        <el-option :label="item.enterprise_name" :value="item.enterprise_id" v-for="item in money"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="value_expression" label="碳银价值体现">
                    <el-input type="textarea" v-model="form.value_expression"  placeholder="请输入" style="width:300px;height:50px"></el-input>
                </el-form-item>
            </el-form>
            <div style="width:500px;margin:50px 100px;">
                <el-button  type="primary" style="width: 150px;display: inline-block" @click="tijiao" :disabled="isdisable">提交</el-button>
                <el-button style="margin-top: 12px;width: 150px;display: inline-block" @click="prev" type="primary">上一步</el-button>
            </div>
        </div>
        <!--第三部分-->
        <div v-show="active==3" style="margin-left:400px">
            <h3>提交成功</h3>
            <el-button type="primary" @click="goon">继续新增案例</el-button>
            <el-button @click="go">返回列表</el-button>
        </div>

    </div>
</template>
<script>
    import Bus from '@/config/bus.js'
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    import '@/assets/ueditor/ueditor.config.js'
    import '@/assets/ueditor/ueditor.all.min.js'
    import '@/assets/ueditor/ueditor.parse.min.js'
    import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
    export default {
        data() {
            return {
                obj:{},
                pic:[],
                filelist2:[],
                design:[],
                build:[],
                device:[],
                money:[],
                ops:[],
                pla:[],
                isdisable:false,
                companyList:[],
                stepFlag:false,
                active: 0,
                fileUploadAction:_param.param.fileUploadUrl,
                provinceList:'',
                cityList:'',
                countryList:'',
//                城市
                city:[],
//                县
                country:[],
                page:'',
                id:'',
                apiPort:{
                    getLinkc:'original/enterprise/getEnterpriseList',
///                    发布内容接口
                    fabuList:"information/add",
//                    回显接口
                    getBack:"projectcase/toEditProjectCase",
//                    编辑上传接口
                    editUp:'information/edit',
                    Area:'diction/region',
//                    案例编辑接口
                    addCase:'projectcase/editProjectCase',
                    design:'original/enterprise/getHasDesignAbilityEnterprise',
                    build:'original/enterprise/getHasConstructAbilityEnterprise',
                    device:'original/enterprise/getHasDeviceAbilityEnterprise',
                    money:'original/enterprise/getHasInvestAbilityEnterprise',
                    ops:'original/enterprise/getHasOperationAbilityEnterprise',
                },
                form:{
                    involed:'',
                    content:'',
                    userid:'',
                    province:'',
                    city:'',
                    case_place:'',
                    project_name:'',
                    project_space:'',
                    picture:[],
                    discription:'',
                    project_scale:'',
                    technical_route:'',
                    start_time:'',
                    end_time:'',
                    runtime:'',
                    amount_invesed:'',
                    build_content:'',
                    business_model:'',
                    designer:'',
                    construction:'',
                    equipment_supplier:'',
                    operation:'',
                    fund:'',
                    value_expression:'',
                },
                activeName: 'second',
                labelPosition: 'right',
                dialogImageUrl: '',
                dialogVisible: false,
                value1: '',
            };
        },
        mounted(){
            this.id = this.$route.query.info
            this.page=this.$route.query.page
            this.userid=localStorage.getItem('userId')
            this.form.userid = localStorage.getItem('userId')
            var that = this
            this.editor = UE.getEditor('editor');
            this.getLinkcompany()

            that.getBack(that.id)
        },

        destroyed() {
            this.editor.destroy();
        },
        methods: {
            start(){
                var d = new Date(this.form.start_time)
                this.form.start_time=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            },
            end(){
                var b = new Date(this.form.end_time)
                this.form.end_time=b.getFullYear() + '-' + (b.getMonth() + 1) + '-' + b.getDate() + ' ' + b.getHours() + ':' + b.getMinutes() + ':' + b.getSeconds();
            },
//            getCasecon(){
//
//            },
            goon(){
                window.location.reload();
                this.active=0
                this.editor = UE.getEditor('editor');
                this.$router.push({path:'/cust/case/addCase'})
            },
            tijiao(){
//                this.isdisable=true
                this.form.discription=this.editor.getContent()
                var that = this
                that.form.userid=that.userid
                var paramForm = that.querystring.stringify(that.form)
                console.log(that.form)

                _http.axiosRequest(that,that.apiPort.addCase,paramForm,(res)=>{
                    console.log(res)
                if(res.data.code==100){
                    that.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                    that.active=3
                }else {
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })


            },
            getLinkcompany(){
                var that = this
                var paramForm = that.querystring.stringify({userid:that.userid})
                _http.axiosRequest(that,that.apiPort.design,paramForm,(res)=>{
                    console.log(res.data.data)
                that.design=res.data.data
            })
                var paramForm = that.querystring.stringify({userid:that.userid})
                _http.axiosRequest(that,that.apiPort.build,paramForm,(res)=>{
                    console.log(res.data.data)
                that.build=res.data.data
            })
                var paramForm = that.querystring.stringify({userid:that.userid})
                _http.axiosRequest(that,that.apiPort.device,paramForm,(res)=>{
                    console.log(res.data.data)
                that.device=res.data.data
            })
                var paramForm = that.querystring.stringify({userid:that.userid})
                _http.axiosRequest(that,that.apiPort.money,paramForm,(res)=>{
                    console.log(res.data.data)
                that.money=res.data.data
            })
                var paramForm = that.querystring.stringify({userid:that.userid})
                _http.axiosRequest(that,that.apiPort.ops,paramForm,(res)=>{
                    console.log(res.data.data)
                that.ops=res.data.data
            })
            },
//            步骤控制

            next() {
                if(this.form.project_name!=''){
                    this.active = ++this.active
                    if (this.active > 1){
                        this.active=1
                    }
                }else{
                    this.$message({
                        message:'案例名称不能为空',
                        type: 'warning'
                    });
                }

                console.log(this.active)

            },
            prev() {
                this.active = --this.active
                if (this.active == 0){
                    this.stepFlag=false;
                    this.active=0
                }
            },
            beforeAvatarUpload(file) {
//                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!(file.type == 'image/jpeg'||file.type == 'image/png')) {
                    this.$message.error('图片只能是 JPG或者PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('图片大小不能超过 10MB!');
                }
                return isLt2M&&(file.type == 'image/jpeg'||file.type == 'image/png');
            },
            success(response,file,fileList){
//                console.log(response)
//                console.log(file.url)
//                this.form.attachment=response.url
                this.form.picture=[]
                console.log(fileList)
                for(var i in fileList){
                    console.log(fileList[i].response.url)
                    this.form.picture.push(fileList[i].response.url)

                }
                console.log(this.form.picture)

            },
            handleRemove(file, fileList) {
                this.form.picture=[]
                console.log(fileList);
                for(var i in fileList){
                    console.log(fileList[i].url)
                    this.form.picture.push(fileList[i].url)
                }
                console.log(this.form.picture)
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            change(){
                var that = this
                this.city=[]
                console.log(this.pla)
                var place = this.pla
                for(var a in this.cityList){
                    console.log()
                    if(this.form.province==this.cityList[a].pid){
                        this.city.push(this.cityList[a])
                    }
                }
                this.changeThree()

            },
//            change(){
//                this.form.city=''
//                this.form.case_place=''
//                this.city=[]
//                for(var a in this.cityList){
//                    if(this.form.province==this.cityList[a].pid){
//                        this.city.push(this.cityList[a])
//                    }
//                }
//            },
//            获取县级别
            changeThree(){
//                this.form.case_place=''
                this.country=[]
                for(var a in this.countryList){
                    if(this.form.city==this.countryList[a].pid){
                        this.country.push(this.countryList[a])
                    }
                }
            },
            getarea(){
                var that = this
                var paramsLy = this.querystring.stringify({userid:this.userid})
                _http.axiosRequest(that,that.apiPort.Area,paramsLy,(res)=>{
                    console.log("地址")
                console.log(res.data)
                that.provinceList = res.data.L0
                that.cityList = res.data.L1
                that.countryList = res.data.L2
                that.form.province=that.pla[0]?parseInt(that.pla[0]):''
                that.form.city=that.pla[1]?parseInt(that.pla[1]):''
                that.form.case_place=that.pla[2]?parseInt(that.pla[2]):''
                    this.change()
//
            })
            },
            submit(){
                if(this.id!=1){
                    this.editActive()
                }else{
                    this.addActive()
                }
            },
            addMsg(){
                this.form.discription=this.editor.getContent()
                var that = this
                var params = that.querystring.stringify(this.form)
                _http.axiosRequest(that,that.apiPort.fabuList,params,(res)=>{
                    console.log(res)
                if(res.data.code==100){
                    that.$message({
                        message: '信息新增成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        that.$router.go(-1)

                    },500)
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            },
            editMsg(){
                this.form.content=this.editor.getContent()
                var that = this
                that.form.id = that.id
                console.log(this.form)
                var params = that.querystring.stringify(this.form)
                _http.axiosRequest(that,that.apiPort.editUp,params,(res)=>{
                    console.log(res)
                if(res.data.code==100){
                    that.$message({
                        message: '信息编辑成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        that.$router.go(-1)
                    },500)
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            },
            //            获取回显内容
            getBack(id){
                var that = this
                var params = that.querystring.stringify({'id':id,'userid':this.form.userid})
                _http.axiosRequest(that,that.apiPort.getBack,params,(res)=>{
                    that.getarea()
                    console.log(res.data.data)
                        that.form.id=res.data.data.id,
                        that.form.userid = that.userid,
                        that.form.involed= res.data.data.involed,
                        that.form.content= res.data.data.content,
                        that.form.userid= res.data.data.userid,
                        that.form.project_name= res.data.data.project_name,
                        that.form.project_space= res.data.data.project_space,
                        that.form.picture= res.data.data.picture,
                        that.form.discription= res.data.data.discription,
                        that.form. project_scale= res.data.data. project_scale,
                        that.form.technical_route= res.data.data.technical_route,
                        that.form.start_time= res.data.data.start_time,
                        that.form.end_time= res.data.data.end_time,
                        that.form.runtime= res.data.data.runtime,
                        that.form.amount_invesed= res.data.data.amount_invesed,
                        that.form.build_content= res.data.data.build_content,
                        that.form.business_model= res.data.data.business_model,
                        that.form.designer= res.data.data.designer,
                        that.form.construction= res.data.data.construction,
                        that.form.equipment_supplier= res.data.data.equipment_supplier,
                        that.form.operation= res.data.data.operation,
                        that.form.fund= res.data.data.fund,
                        that.form.value_expression= res.data.data.value_expression,
                        that.editor.setContent(res.data.data.discription)

                         that.pla = res.data.data.case_place?res.data.data.case_place.split(','):[]
                        console.log(that.pla)
//                       that.filelist2=res.data.data.picture,
                                that.pic = res.data.data.picture?res.data.data.picture.split(','):[]
                        for(var i=0;i<that.pic.length;i++){
                            that.obj = {url:''}
                            that.filelist2.push(that.obj)
                            that.filelist2[i].url=that.pic[i]
                            console.log(that.filelist2)
                        }
//                        var place = res.data.data.case_place?res.data.data.case_place.split(','):[]
//                        that.form.province=place[0]
//                        that.form.city=place[1]
//                        that.form.case_place=place[2]

//                     that.form.province=pla[0]
//                     that.form.city=pla[1]
//                     that.form.case_place=pla[2]
//                         console.log( that.form.province)
//                          console.log( that.form.city)
//                     console.log( that.form.case_place)

//                that.editor.setContent(res.data.data.discription)
                console.log(res)
            })
            },
            //            发布提交
            editsubmit(){

                    this.editMsg()
            },
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            go(){
//                router.go({name: 'fabu', params: {userId: 1}});
                var that = this
                that.$router.go(-1)
            },
//            handleRemove(file, fileList) {
//                console.log(file, fileList);
//            },
//            handlePictureCardPreview(file) {
//                this.dialogImageUrl = file.url;
//                this.dialogVisible = true;
//            }
            send(){
                var that=this
                setTimeout(function(){
                    Bus.$emit('pageS',that.page)
                },200)
            }
        },
    };
</script>